<template>
  <div class="user-base-info clearfix">
    <div class="user-avatar">
      <img :src="userAvatarUrl" alt="avatar" class="avatar-img">
      <input type="file" @input="changeAvatar($event)">
      <div class="input-hover"></div>
    </div>

    <div class="user-name-sign">
      <h2 class="username">{{infos.username}}</h2>
      <sign-input class="user-sign"
      :sign="infos.sign" url="www.baidu.com"
      :defaultSign="defaultSign"
      @change="changeSign"
      />
    </div>

    <div @click="toEdit" class="user-info-edit">
      <i class="iconfont icon-setting"></i>
      <span>编辑资料</span>
    </div>
  </div>
</template>

<script>
import SignInput from '@c/utils/Input/SignInput.vue'

export default {
  components: {
    SignInput
  },
  data() {
    return {
      defaultSign: '写下你的格言吧!'
    }
  },
  computed: {
    infos() {
      return this.$store.state.user.infos;
    },
    userAvatarUrl() {
      return this.infos.avatar
      ? this.$baseURL + this.infos.avatar
      : this.$baseURL + this.$defaultAssetUrls.avatar
    }
  },
  methods: {
    changeSign(newSign) {
      this.$store.commit('changeBaseInfo', {
        key: 'sign',
        value: newSign
      });
    },
    changeAvatar(event) {
      this.$store.commit('changeBaseInfo', {
        key: 'avatar',
        value: event.target.files[0]
      })
    },
    toEdit() {
      this.$router.push({
        path: '/user/edit'
      })
    }
  },
}
</script>

<style scoped lang="less">
.user-base-info {
  --w: var(--userBaseInfoWidth);
  --h: var(--userBaseInfoHeight);
  --ih: calc(var(--h) * 2 / 3);
  box-sizing: border-box;
  width: var(--w);
  height: var(--h);
  padding: calc(var(--h) / 6) calc(var(--w) / 24);
  background-color: white;
  border-radius: 3px;

  .user-name-sign,
  .user-avatar {
    float: left;
  }

  .user-avatar {
    position: relative;

    width: var(--ih);
    height: var(--ih);
    border-radius: 50%;

    overflow: hidden;

    .avatar-img {
      // width: var(--ih);
      // height: var(--ih);
      width: 100%;
      height: 100%;
    }

    input,
    .input-hover {
      position: absolute;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;

      opacity: 0;
    }

    .input-hover {
      background-color: var(--gray);

      pointer-events: none;
    }

    input:hover {
      cursor: pointer;
    }

    &:hover {
      .input-hover {
        opacity: 1;
      }
    }
  }

  .user-name-sign {
    padding-left: 5%;
    width: 40%;

    h2 {
      padding-left: calc(var(--ih) * 0.18);

      font-size: calc(var(--h) * 0.2);
      line-height: 2;
    }

    .user-sign {
      --w: 100%;
      --h: calc(var(--ih) * 0.35);
      --fs: calc(var(--ih) * 0.18);
    }
  }

  .user-info-edit {
    --eh: calc(var(--h) / 6);
    float: right;
    padding: calc(var(--eh) / 4) calc(var(--eh) / 2);
    border-radius: var(--eh);
    border: 1px solid var(--gray);

    i, span {
      line-height: var(--eh);
      padding: 0 calc(var(--eh) / 20 * 3);
    }
    
    i {
      font-size: calc(var(--eh) / 5 * 4);
    }

    span {
      font-size: calc(var(--eh) / 10 * 7);
    }

    &:hover,
    i:hover,
    span:hover {
      border-color: var(--blue);
      color: var(--blue);
      cursor: pointer;
    }
  }
}
</style>